import React, { useEffect, useState } from 'react'
// import {useDispatch} from 'umi'
import { useGrade } from '@/services/index'
import '../index.less'
import { Form, Input, Button, Select } from 'antd';
import { FormInstance } from 'antd/lib/form';


const QuestionType: React.FC = () => {

  const [getGrade, setGrade] = useState<any[]>([])

  useEffect(() => {
    useGrade().then(res => {
      setGrade(res.data)
    })
  }, [])


  const { Option } = Select;

  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };
  const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
  };

  class Demo extends React.Component {
    formRef = React.createRef<FormInstance>();

    onGenderChange = (value: string) => {
      switch (value) {
        case 'male':
          this.formRef.current!.setFieldsValue({ note: 'Hi, man!' });
          return;
        case 'female':
          this.formRef.current!.setFieldsValue({ note: 'Hi, lady!' });
          return;
        case 'other':
          this.formRef.current!.setFieldsValue({ note: 'Hi there!' });
          return;
      }
    };

    onFinish = (values: any) => {
      console.log(values);
    };

    onReset = () => {
      this.formRef.current!.resetFields();
    };

    onFill = () => {
      this.formRef.current!.setFieldsValue({
        note: 'Hello world!',
        gender: 'male',
      });
    };

    render() {
      return (
        <Form ref={this.formRef} onFinish={this.onFinish}>
          <Form.Item rules={[{ required: true }]}>
            <Input placeholder="输入学生姓名" />
          </Form.Item>
          <Form.Item rules={[{ required: true }]}>
            <Select
              placeholder="请选择班级号"
              onChange={this.onGenderChange}
              allowClear
            >
              <Option value="male">male</Option>
            </Select>
          </Form.Item>
          <Form.Item rules={[{ required: true }]}>
            <Select
              placeholder="请选择班级号"
              onChange={this.onGenderChange}
              allowClear
            >
              <Option value="male">male</Option>
            </Select>
          </Form.Item>

          <Form.Item
            noStyle
            shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender}
          >
            {({ getFieldValue }) => {
              return getFieldValue('gender') === 'other' ? (
                <Form.Item
                  name="customizeGender"
                  label="Customize Gender"
                  rules={[{ required: true }]}
                >
                  <Input />
                </Form.Item>
              ) : null;
            }}
          </Form.Item>
          <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit">
              搜索
            </Button>
          </Form.Item><Form.Item {...tailLayout}>
            <Button htmlType="button" onClick={this.onReset}>
              重置
            </Button>
          </Form.Item>
          <p></p>
        </Form>
      );
    }
  }



  return (
    <div className='studentclass'>
      {/* <h1>学生管理</h1> */}
      {/* <div> */}
      <Demo />
      {/* </div> */}
    </div>
  );
}

export default QuestionType;
